{{page-title "Authenticate"}}
{{set-body-class "bg-color-page-faint"}}

<div
  class="flex flex-col items-center justify-center flex-1 min-h-full py-12 relative"
>
  <Hds::Card::Container
    @level="high"
    @hasBorder="true"
    @overflow="visible"
    class="flex flex-col items-center px-24 pt-24 pb-32 text-center relative"
  >
    <HermesLogo class="mb-8" />
    <h1 class="">
      Welcome to Hermes.
    </h1>
    <p class="mb-8 text-display-300">
      Log in to browse, search, and manage documents
    </p>
    <Hds::Button
      @text="Authenticate with Google"
      @size="large"
      @icon="google"
      {{on "click" this.authenticate}}
    />

  </Hds::Card::Container>
  <Footer/>
</div>

{{outlet}}
